[#ftl]
[@define "agile.FloatingPane" "ContentPane" "move=dojo/dnd/move,ResizeHandle=dojox/layout/ResizeHandle"]
	parseOnLoad:false 	
	//,widgetsInTemplate:true
 	,title:"",name:"" 	
 	,floatingContainer:""
 	,"class":"bp_hidden"
 	,floating:false	
 	,open:false
 	,helpText:""
 	[#assign header][#compress]
	<div class="header dijitTitlePaneTitle dijitTitlePaneTitleOpen dijitOpen" style="padding:2px;cursor:move">
		<div style='display:inline;margin-left:10px;cursor:pointer'>
			<div class='agileButton agileButtonExpand'></div>
			<div class='agileButton agileButtonShrink'></div>
		</div>
		<div class="title" style="display:inline;font-weight:bold;font-size:1.2em">
			<div class="header1" style='display:inline;height:1.5em'>{title}</div>		
			<div class="subtitle" style="display:inline;font-style:italic;color:#4169e1">&nbsp;</div>
		</div>
		<div style='display:inline;margin-left:10px;float:right;cursor:pointer'>
			<div class='agileButton agileButtonClose'></div>
		</div>
	</div>	
	[/#compress][/#assign]	
 	,headerTemplateString:"${header?js_string}"
 	,contentTemplateString:""
 		
 	,postMixInProperties: function(){
		this.inherited(arguments);
		
		aspect.after(this,"postCreate",lang.hitch(this,"createPane"));
		
		if(!this.floatingContainer){
			return;
		}
		
//		console.log(this.declaredClass,"@@floatingContainer:",this.floatingContainer);
		
		this.title = agile.i18n(this.name,null,this,name);
		
		aspect.after(this,"startup",lang.hitch(this,"initMoveable"));
		
		aspect.after(this,"startup",lang.hitch(this,function(){
//		this.subscribe("agile.ready",function(obj){
//	 		if(obj == "Application"){
	 			this.onMoveStart1();	
	 			if(this.open){
	 				this.showContentPane();
	 			}else{
	 				this.hideContentPane();
	 			}
//	 		}
//	 	});
		}));
		
		this.subscribe("agile.view",function(action,name){			
			if(this.name == name){
				if(action == "show"){
					style.set(this.domNode,{display:"block"});
					this.showContentPane();
				}else{
					style.set(this.domNode,{display:"none"});
				}
			}
		});
				
//	 	this.subscribe("agile.workspace.sizeChanged",function(marginBox){	 		
//			style.set(this.domNode,{left:(marginBox.w - this.getSize("w")) - 10 +"px"});
//	 	});	
	} 
	,createPane:function(){
		if(!this.floatingContainer){
			 this.domNode.innerHTML = this.contentTemplateString;
		}else{
			this.domNode.innerHTML = "<div>"+lang.replace(this.headerTemplateString,{title:this.title}) + this.contentTemplateString +"</div>";
		}
//		 console.log("@@@@@this.domNode.innerHTML=",this.domNode.innerHTML)
		 parser.parse(this.domNode);	
		 style.set(this.domNode,{padding:"0px",border:"0px"});	 
		 
		 query(".content",this.domNode).forEach(function(node){
	       	this.mainContainer = this.content = registry.byNode(node);
	     },this);
		 
        if(this.content == null){
        	console.error(this.declaredClass,"content widget is not defined");
        }
        
        if(!this.floatingContainer){
        	return;
        }
	        
		 query(".agileButtonExpand",this.domNode).forEach(function(node){
		 	node.title = agile.i18n("expand_view_tips",null,"Maximize the window");
			this.showButton = node;
			on(node,"click",lang.hitch(this,function(event){					
				this.showContentPane();					
			}));				
		},this);
		 
		 query(".agileButtonClose",this.domNode).forEach(function(node){
			 node.title = agile.i18n("close_view_tips",null,"Close the window,reopen it from the View menu");
			 on(node,"click",lang.hitch(this,function(){
				 style.set(this.domNode,{display:"none"});
				 topic.publish("agile.view.status",this.name,false);
			 }));
		 },this);
		 
		 query(".agileButtonShrink",this.domNode).forEach(function(node){
			 node.title = agile.i18n("shrink_view_tips",null,"Minimize the window");
				this.hideButton = node;				
				on(node,"click",lang.hitch(this,function(event){					
					this.hideContentPane();					
				}));
			},this);
		 
        
        this.subtitle = query(".subtitle",this.domNode)[0];
//        this.header = query(".header",this.domNode)[0];
		 
//        this.header.title = this.helpText;
        
        query(".header",this.domNode).forEach(function(node){
        	node.title = this.helpText;	
        	this.header = node;
//			on(node,"click",lang.hitch(this,function(event){	
//				//event.stop();
//				if(this.open){
//					this.hideContentPane();
//				}else{
//					this.showContentPane();
//				}
//			}));
		},this);
        
		 
        this._size = agile.calcSize(this.domNode);
	}   
	,setSubtitle:function(text){
		this.subtitle.innerHTML = text;
	}
	[@method "showContentPane"/]
	,showContentPane:function(){
		style.set(this.content.domNode,{display:"block"});			
		style.set(this.resizeHandle.domNode,"visibility","visible");			
		style.set(this.showButton,"display","none");				
		style.set(this.hideButton,"display","block");
		style.set(this.header,"width",null);
		
		this.content.resize();
//		this.resize();
		this.open = true;
		
		this._size = agile.calcSize(this.domNode);
	}
	[@method "hideContentPane"/]
	,hideContentPane:function(){
		var box = agile.calcSize(this.content.domNode);
		style.set(this.header,"width",box.w +"px");		
		style.set(this.content.domNode,{display:"none"});
		style.set(this.resizeHandle.domNode,"visibility","hidden");		
		style.set(this.showButton,"display","block");
		style.set(this.hideButton,"display","none");
//		this.resize();
		this.open = false;
		
		this._size = agile.calcSize(this.domNode);
	}
	[@method "initMoveable"/]
	,initMoveable:function(){		
//		console.log(this.declaredClass,"###floatingContainer:",this.floatingContainer);
		var _floatingContainer = registry.byId(this.floatingContainer);
		var moveHandle = this.getMoveHandle();
		var moveable = new move.constrainedMoveable(this.domNode,{
			within: true
			,handle:moveHandle
			,constraints:function(){
				return agile.calcSize(_floatingContainer.domNode);
			}
		});
		
//		var floatingPane = this;	
//		lang.mixin(moveable,{
//			_moveable: false			
//			,onMoving: function(mover,leftTop){
//				if(!this._moveable){
////					//console.log(this.declaredClass,"[agile.FloatingPane]onMoving",this._moveable);
//					this._moveable = true;			
//					floatingPane.onMoveStart1();					
//				}
//			}
//		});		
	 }	 
	[@method "onMoveStart1"/]
	,onMoveStart1:function(){
//		//console.log(this.declaredClass,"[agile.FloatingPane]onMoveStart");
		this.floating = true;
			
		var resizableTargetNode = this.getResizableTargetContainer();
		var resizableTargetId = this.getResizableTargetId();
		var resizeHandleAnchorNode = this.getResizeHandleAnchorNode();
		var resizableSize = this.getResizableSize();
				
		style.set(this.domNode,"height",null);
		style.set(this.domNode,"width",null);
		
		style.set(resizableTargetNode,resizableSize);
				
//		topic.publish("agile.application.child-Float",[this]);
		this.resizeHandle = new ResizeHandle({
			resizeAxis: "xy"
			,activeResize:true
			,minHeight:10
			,minWidth:10
			,targetId: resizableTargetId
		}).placeAt(resizeHandleAnchorNode);
		
//		aspect.after(this.resizeHandle,"onResize",lang.hitch(this,function(e){
//			var size = agile.calcSize(this.domNode);	
////			this.onResizeStop(this._size);
////			console.log("size:",size);
//			style.set(this.header,"width",size.w +"px");
//		}),true);

		style.set(this.domNode,{position:"absolute"});
		style.set(this.domNode,this.getDefaultLocation());
		
		style.set(this.resizeHandle.domNode,"visibility","hidden");

	}
	,getMoveHandle:function(){
		 return query(".header",this.domNode)[0];
	}
	,getResizableTargetContainer:function(){
		 return this.content.domNode;
	}
	,getResizeHandleAnchorNode:function(){
		return this.content.domNode;
	}	
	,getResizableTargetId:function(){
		return this.content.id;		 
	}
	,getResizableSize:function(){		
		return {height:"200px",width:"300px"};		 
	}	
	,getDefaultLocation:function(){
		return {left:"10px",top:"100px"};		 
	}
	,getSize:function(property){
		if(!property){
			return this._size;
		}
		return this._size[property];
	}
//	,onResizeStop:function(size){
//		 
//	}
[/@]
